<template>
  <sn-row-has-two-col :left="1" :right="23" class="order-count-down">
    <el-image :src="shalou" class="shalou" slot="one-col"/>
    <div slot="two-col" class="margin-left">
      <div class="to-flex">
        <sn-text text="请在" font-color="#2B2B2B" class="margin-right"></sn-text>
        <sn-text :move-down="-9" :text="minutes" :font-size="30" font-color="#F76C6C"
                 class="margin-right"></sn-text>
        <sn-text text="分钟" font-color="#2B2B2B" class="margin-right"></sn-text>
        <sn-text :move-down="-9" :text="second" :font-size="30" font-color="#F76C6C"
                 class="margin-right"></sn-text>
        <sn-text text="秒内完成支付" font-color="#2B2B2B"></sn-text>
      </div>
      <p style="color:#F76C6C;" class="margin-top-20">订单超时会自动取消 如遇支付问题请致电Future客服</p>
    </div>
  </sn-row-has-two-col>
</template>

<script>
export default {
  name: "CountDown",
  //倒计时
  data() {
    return {
      shalou: require('@/assets/image/order/shalou.png')
    }
  },
  methods: {
    // 倒计时
    num(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    add() {
      var _this = this;
      var time = window.setInterval(function () {
        if (_this.$store.getters.getOrderPayCountDownSeconds === 0 && _this.$store.getters.getOrderPayCountDownMinutes !== 0) {
          _this.$store.commit(_this.mutationsTypes.EXCHANGE_SECONDS, 59)
          _this.$store.commit(_this.mutationsTypes.EXCHANGE_MINUTES_STEP)
        } else if (_this.$store.getters.getOrderPayCountDownMinutes === 0 && _this.$store.getters.getOrderPayCountDownSeconds === 0) {
          _this.$store.commit(_this.mutationsTypes.EXCHANGE_SECONDS, 0)
          window.clearInterval(time);
        } else {
          _this.$store.commit(_this.mutationsTypes.EXCHANGE_SECONDS_STEP)
        }
      }, 1000);
    },
  },
  computed: {
    second() {
      return this.num(this.$store.getters.getOrderPayCountDownSeconds)
    },
    minutes() {
      return this.num(this.$store.getters.getOrderPayCountDownMinutes)
    }
  }

}
</script>

<style scoped>
.order-count-down {
  height: 150px;
  background-color: #FFF3F3;
  padding-left: 30px;
  padding-top: 40px;
  padding-bottom: 20px;
  margin-bottom: 50px;
}

.shalou {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
</style>
